<template>
	<view>
		<view class="item">
			<text>单位名称</text><input type="text" placeholder="请输入" @input="namedianji" />
		</view>
		<view id="select">
			<text>送达日期</text>
			<picker mode="date" fields="month" @change="gettime">
				<input type="text" v-model="xzdata.date" placeholder="请选择日期" />
			</picker>
		</view>
		<view class="item">
			<text>送达人</text><input type="text" placeholder="请输入" @input="sddianji" />
		</view>
		<view class="item">
			<text>接收人</text><input type="text" placeholder="请输入" @input="jsdianji" />
		</view>
		<view class="item">
			<text>地址</text><input type="text" placeholder="请输入" @input="addressdianji" />
		</view>
		<view class="item">
			<text>送达材料类型</text><input type="text" placeholder="请输入" @input="typedianji" />
		</view>
		<text>上传回执(最多10张)</text>
		<view>
			<uni-file-picker v-model="imageValue" fileMediatype="image" mode="grid" @select="select"
				@progress="progress" @success="success" @fail="fail" />
		</view>
		<view id="submit">
			<navigator url="shoufei" @click="add">提交</navigator>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs
	} from 'vue';
	import http from '../../utils/http.js';
	export default {
		setup() {
			let data = reactive({
				index:'',
				xzdata: {
					name: '',
					date: '',
					sd: '',
					js: '',
					address: 'array[index]',
					type: ''
				},
				imageValue: [],
				namedianji: (ev) => {
					data.xzdata.name = ev.detail.value;
				},
				gettime: (ev) => {
					data.xzdata.date = ev.detail.value;
					console.log(ev.detail.value)
				},
				sddianji: (ev) => {
					data.xzdata.sd = ev.detail.value;
				},
				jsdianji: (ev) => {
					data.xzdata.js = ev.detail.value;
				},
				addressdianji: (ev) => {
					data.xzdata.address = ev.detail.value;
				},
				typedianji: (ev) => {
					data.xzdata.type = ev.detail.value;
				},
				add: () => {
					console.log(data.xzdata);
					http({
						url: '/wx/add',
						data: data.xzdata,
						method: 'post'
					}).then((res) => {
						console.log(res);
						if (res.data.code == 200) {
							wx.showModal({
								title: "添加成功,",
								content: '是否继续添加？',
								cancelText: '回到首页',
								success: (res) => {
									this.setData({
										name: '',
										date: '',
										sd: '',
										js: '',
										address: '',
										type: ''
									})
								}
							})
						}
					})
				},
				select: (e) => {
					console.log('选择文件：', e)
				},
				progress: (e) => {
					console.log('上传进度：', e)
				},
				success: (e) => {
					console.log('上传成功')
				},
				fail: (e) => {
					console.log('上传失败：', e)
				}
			});
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style>
	#select {
		border-bottom: #C6C6C6 1rpx solid;
		height: 100rpx;
		align-items: center;
		display: flex;
		justify-content: space-around;
	}

	#select text {
		text-align: left;
		flex: 4;
	}

	#select picker {
		flex: 10;
	}
	.item {
		border-bottom: #C6C6C6 1rpx solid;
		height: 100rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
	}

	.item text {
		padding-left: 10rpx;
		text-align: left;
		flex: 3;

	}

	.item input {
		flex: 8;
	}

	.img {
		width: 750rpx;
		height: 240rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	#submit {
		width: 750rpx;
		height: 80rpx;
		justify-content: center;
		display: flex;
		color: white;
	}

	#submit navigator {
		line-height: 80rpx;
		text-align: center;
		height: 80rpx;
		width: 700rpx;
		background-color: #0079FE;
	}

	#op {
		display: flex;
		margin: 40rpx 10rpx;
	}
</style>
